body{
    display: flex;
    flex-direction: column;
}
.home{
    width: 100%;
    flex: 1;
    overflow-y: scroll;
    .swiper{
        width: 100%;
        height: 200px;
        img{
            width: 100%;
            height: 200px;
        }
    }

    .content{
        padding-bottom: 90px;
        .one{
            width: 100%;
            height: 150px;
            margin: 20px 0;
            display: flex;
            justify-content: space-between;
            .left{
                width: 40%;
                height: 150px;
                border-radius: 15px;
                background-color: rgba(21, 146, 204, 0.5);
                position: relative;
                .writ{
                    line-height: 50px;
                    color: #004E73;
                    padding: 0 16px;
                    font-weight: bold;
                }
                img{
                    width: 106px;
                    height: 100px;
                    position: absolute;
                    bottom: 5px;
                    left: 0px;
                }
                .num{
                    color: #fff;
                    font-size: 36px; 
                    font-weight: bold;
                    position: absolute;
                    bottom: 6px;
                    right: 4px;
                }
            }
            .right{
                width: 55%;
                height: 150px;
                border-radius: 10px;
                background-color: rgba(123, 203, 245, 0.5);
                position: relative;
                .writ{
                    line-height: 50px;
                    color: #004E73;
                    padding: 0 16px;
                    font-weight: bold;
                }
                img{
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    bottom: 5px;
                    left: 8px;
                }
                .num{
                    width: 90px;
                    line-height: 30px;
                    color: #004E73;
                    font-size: 16px; 
                    border: 3px solid #004E73;
                    border-radius: 20px;
                    text-align: center;
                    position: absolute;
                    bottom: 20px;
                    right: 8px;
                }
            }
        }
        .two{
            width: 100%;
            height: 110px;
            margin: 20px 0;
            display: flex;
            justify-content: space-between;
            .left{
                width: 55%;
                height: 110px;
                border-radius: 15px;
                background: url(../imgs/index-card-data.png) no-repeat;
                background-size: 100% 100%;
                p{
                    line-height: 50px;
                    color: #fff;
                    padding: 0 16px;
                    font-weight: bold;
                }
            }
            .right{
                width: 40%;
                height: 110px;
                border-radius: 10px;
                background-color: rgb(157,189,227);
                position: relative;
                .writ{
                    line-height: 50px;
                    color: #004E73;
                    padding: 0 16px;
                    font-weight: bold;
                }
                img{
                    width: 80px;
                    height: 75px;
                    position: absolute;
                    bottom: 0px;
                    left: 0px;
                }
                .num{
                    color: #004E73;
                    font-size: 16px;
                    font-weight: bold;
                    position: absolute;
                    bottom: 6px;
                    right: 4px;
                    span{
                        font-size: 36px; 
                    }
                }
            }
        }
        .three{
            width: 100%;
            height: 110px;
            margin: 20px 0;
            border-radius: 15px;
            background: url(../imgs/index-swiper-bg2.jpg) no-repeat;
            background-size: 100% 100%;
            p{
                line-height: 50px;
                color: #fff;
                padding: 0 16px;
                font-weight: bold;
            }
        }
        .four{
            width: 100%;
            height: 110px;
            margin: 20px 0;
            border-radius: 15px;
            background: url(../imgs/course-img02.png) no-repeat;
            background-size: 100% 100%;
            p{
                line-height: 50px;
                color: #fff;
                padding: 0 16px;
                font-weight: bold;
            }
        }

    }

    
} 